<template>
    <div id="homeInspection">
      <div class="middle1">
        <div v-for="(item, index) in fileList2" :key="index">
          <p v-if="item.title" class="subTitle"><span class="line"></span>{{ item.title }}</p>
          <div v-else-if="item.type==='input'">
            <van-field
              v-model="formData[item.key]"
              :name="item.name"
              :label="item.name"
              :placeholder="'请填写'+item.name"
              :rules="[{ required: true, message: '请填写' }]"
            />
          </div>
          <div v-else-if="item.type==='select'">
            <van-field
              readonly
              clickable
              name="picker"
              :value="formData[item.key]"
              :label="item.name"
              :placeholder="'点击选择'+item.name"
              @click="!item.readonly&&item.columns.length>0?item.showPicker = true:''"
            />
            <van-popup v-model="item.showPicker" position="bottom">
              <van-picker
                show-toolbar
                :columns="item.columns"
                value-key="cityname"
                @confirm="onConfirm2($event , item)"
                @cancel="item.showPicker = false"
              />
            </van-popup>
          </div>
          <div v-else-if="item.type==='time'">
            <van-field
              readonly
              clickable
              name="datetimePicker"
              :value="value"
              :label="item.name"
              placeholder="点击选择时间"
              @click="item.showPicker = true"
            />
            <van-popup v-model="item.showPicker" position="bottom">
              <van-datetime-picker
                type="time"
                @confirm="onConfirm2"
                @cancel="item.showPicker = false"
              />
            </van-popup>
          </div>
          <div v-else-if="item.type==='radio'">
            <van-field name="radio" :label="item.name">
              <template #input>
                <van-radio-group v-model="formData[item.key]" direction="horizontal">
                  <van-radio
                    v-for="(item1,index1) in item.radioData"
                    :key="index1"
                    :name="item1.value"
                  >{{item1.name}}</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </div>
      </div>
      <div class="bottomBtn">
        <div style="width: 100vw;display: flex; align-items: center;justify-content: center;">
          <van-button style="width: 20vw;margin-right: 5px" type="info" @click="resetData">重置</van-button>
          <van-button style="width: 20vw;margin-right: 5px" type="info" @click="confirm">确定</van-button>
          <van-button style="width: 20vw;" type="info" @click="$parent.showHomeInspection=true">返回</van-button>
        </div>
      </div>
    </div>
</template>

<script>

import Pubsub from 'pubsub-js'
  import axios from 'axios'
  export default {
    name: "homeInspection",
    data(){
      return{
        codeLevel:'',
        formData:{
          cityCode:''
        },
        fileList2: [
          {
            title: '所属区域'
          },
          {
            name: '所属地市',
            type:'select',
            key:'cityName',
            showPicker:false,
            columns:[],
          },
          {
            name: '所属区县',
            type:'select',
            key:'countyName',
            showPicker:false,
            columns:[],
          },
          {
            name: '所属乡镇',
            type:'select',
            key:'townName',
            showPicker:false,
            columns:[],
          },
          {
            name: '所属村',
            type:'select',
            key:'villageName',
            showPicker:false,
            columns:[],
          },
          {
            name: '自建房安全排查编号',
            type:'input',
            key:'yhfwbh'
          },
          {
            name: '户主姓名',
            type:'input',
            key:'cqr'
          },
          {
            name: '户主身份证号',
            type:'input',
            key:'sfzh'
          },
          {
            name: '详细地址',
            type:'input',
            key:'address'
          },
          {
            name: '房屋用途',
            type:'radio',
            key:'fwyt',
            radioData:[
              {
                name:'经营性自建房',
                value:1
              },
              {
                name:'其他自建房',
                value:2
              }
            ]
          },
          {
            name: '鉴定结论',
            type:'radio',
            key:'fwaqdj',
            radioData:[
              {
                name:'A级',
                value:1
              },
              {
                name:'B级',
                value:2
              },
              {
                name:'C级',
                value:3
              },
              {
                name:'D级',
                value:4
              }
            ]
          },
          {
            name: '整治状态',
            type:'radio',
            key:'zzstatus',
            radioData:[
              {
                name:'未整治',
                value:1
              },
              {
                name:'已整治',
                value:2
              },
            ]
          },
          {
            name: '管理措施',
            type:'radio',
            key:'glcs',
            radioData:[
              {
                name:'停止使用',
                value:1
              },
              {
                name:'停止经营',
                value:2
              },
              {
                name:'封控警示',
                value:3
              },
              {
                name:'人员撤离',
                value:4
              },
              {
                name:'持续监控',
                value:5
              },
              {
                name:'其他',
                value:6
              },
            ]
          },
          {
            name: '工程措施',
            type:'radio',
            key:'gccs',
            radioData:[
              {
                name:'拆除重建',
                value:1
              },
              {
                name:'维修加固',
                value:2
              },
              {
                name:'其他',
                value:3
              },
            ]
          },
        ],
      }
    },
    props:{
      cityCode:String,
      data2:String,
      data:String
    },
    methods:{
      info(){
        console.log(this.cityCode)
        let cityCode = ""
        if (this.cityCode) {
          cityCode = this.cityCode
        } else {
          cityCode = JSON.parse(this.data).cityCode
        }
        if (this.data) {
          this.formData = JSON.parse(this.data)
          // console.log(JSON.parse(this.$route.query.data))
          // console.log(JSON.parse(this.$route.query.data2))
          this.getCityName(cityCode)
          this.formData.cityCode = cityCode
          this.codeLevel = this.citycode((cityCode).toString())
          this.getCountyData(cityCode)
        } else {
          this.getCityName(cityCode)
          this.formData.cityCode = cityCode
          this.codeLevel = this.citycode(cityCode)
          this.getCountyData(cityCode)
        }
      },
      confirm(){
        // this.$parent.finished2 = false
        // this.$parent.pageNum = 0
        // this.$parent.cityName2 = []
        // this.$parent.filterData = this.formData
        // // this.$parent.getList(JSON.parse(this.$route.query.data))
        // this.$parent.showHomeInspection = true
        // // this.$router.push({
        // //   path: '/homeInspectionlist',
        // //   query: {
        // //     data:this.$route.query.data,
        // //     data2: JSON.stringify(this.formData),
        // //     cityCode:this.$route.query.cityCode
        // //   },
        // // })
        Pubsub.publish("homeInspectionFilter", this.formData)
      },
      resetData(){
        for (let i in this.formData) {
          this.formData[i] = ""
        }
        let cityCode = ""
        if (this.cityCode) {
          cityCode = this.cityCode
        } else {
          cityCode = JSON.parse(this.data).cityCode
        }
        console.log(this.data)
        console.log(this.cityCode)
        this.getCityName(cityCode)
        this.formData.cityCode = cityCode
      },
      onConfirm2(data,item){
        console.log(data)
        console.log(item)
        this.formData[item.key] = data.cityname
        if (item.name=='所属地市') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[2].columns = webResult.data.data
          })
          this.formData.countyName = ""
          this.formData.townName = ""
          this.formData.villageName = ""
        } else  if (item.name=='所属区县') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[3].columns = webResult.data.data
          })
          this.formData.townName = ""
          this.formData.villageName = ""
        }else  if (item.name=='所属乡镇') {
          this.getCityData(data.citycode).then((webResult)=>{
            this.fileList2[4].columns = webResult.data.data
          })
          this.formData.villageName = ""
        }
        this.formData.cityCode = data.citycode
        item.showPicker = false
      },
      goBack(){
        this.$router.push({
          path: '/CityList',
        })
      },
      //判断省市||区县
      citycode(str) {
        if (str.endsWith("0000000000")) {
          //省
          return "省";
        } else if (str.endsWith("00000000")) {
          return "市";
        } else if (str.endsWith("000000")) {
          return "县";
        } else if (str.endsWith("000")) {
          return "村镇";
        } else {
          return "社区"
        }
      },
      getCountyData: async function (code) {
          this.getCityData(code).then((webResult)=>{
          console.log(webResult)
          if (this.codeLevel=='省') {
            this.fileList2[1].columns = webResult.data.data
          } else if (this.codeLevel=='市') {
            this.fileList2[2].columns = webResult.data.data
          } else if (this.codeLevel=='县') {
            this.fileList2[3].columns = webResult.data.data
          }else if (this.codeLevel=='村镇') {
            this.fileList2[4].columns = webResult.data.data
          }
        })
      },
      getCityData: async function (data){
        return new Promise(async(resovlve, reject) => {
          let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + data)
          resovlve(webResult)
        })
      },
      getCityName: async function (code){
        let result = await axios.post(`${window.g.BaseURL}api/farmerHouse/cityCode/getAllParentByCityCode?cityCode=${code}`);
        console.log(result)
        this.formData.cityName = result.data.data.cityName
        this.formData.countyName = result.data.data.countyName
        this.formData.townName = result.data.data.townName
        this.formData.villageName = result.data.data.villageName
        if (result.data.data.cityName) {
          this.fileList2[1].readonly = true
        }
        if (result.data.data.countyName) {
          this.fileList2[2].readonly = true
        }
        if (result.data.data.townName) {
          this.fileList2[3].readonly = true
        }
        if (result.data.data.villageName) {
          this.fileList2[4].readonly = true
        }
        this.$forceUpdate()
      }
    },
    watch:{
      cityCode(data){
        if (this.cityCode) {
          this.info()
        }
      }
    },
    mounted(){
      console.log(this.cityCode)
      console.log(this.data)
      this.info()
      // dd.ready(function () {
      //   dd.setTitle({
      //     title: '筛选'
      //   })
      //     .then(res => {
      //     })
      //     .catch(err => {
      //       console.error(err)
      //     })
      // })
    }
  };
</script>

<style scoped lang="scss">
  #homeInspection{
    .middle1 {
      height: 90vh;
      overflow-y: auto !important;
      font-weight:400;
      background: #fff;
    }
    .subTitle {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      position: relative;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #9b9b9b;
      padding-left: 10px;

      .line {
        width: 6px;
        height: 26px;
        background: #3f8ffc;
        display: inline-block;
        margin-right: 10px;
      }
    }
    .bottomBtn{
      height: 10vh;
      position: absolute;
      display: flex;
      justify-content: center;
      /*bottom: 10px;*/
      background: #ffffff;
      /*margin-top: 12px;*/
      // padding: 6px;
    }

  }

</style>
